<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text-container {
            width: 60%;
            margin: 0 auto;
            padding: 40px;
            background-color: #f0f0f0;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
        }

        .text-container h1 {
            margin-top: 0;
            text-align: center;
            background: linear-gradient(45deg, #e90805, #f5a504);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-size: 36px;
            font-weight: bold;
            letter-spacing: 40px;
        }

        .text-container h2 {
            margin-top: 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .item-container {
            display: flex;
            /* 使用Flexbox布局 */
            align-items: center;
            /* 垂直居中对齐 */
            margin-bottom: 30px;
            /* 每个组合之间的间隔 */
        }
        .top1 li a.active {
          color: gold;
          font-size: 20px;
          background-color: #ff6c6c;
          font-weight: 700;
        }
        .image-container {
            width: 200px;
            /* 固定图片宽度 */
            margin-right: 20px;
            /* 图片与文字之间的间距 */
        }

        .image-container img {
            max-width: 100%;
            /* 图片宽度不超过容器宽度 */
            height: auto;
            /* 保持图片比例 */
        }

        .text-description {
            flex-grow: 1;
            /* 文字部分占用剩余空间 */
        }
    </style>
    <script>
        window.onload = function() {
        const navLinks = document.querySelectorAll('.top1 li a');
          // 为每个导航链接添加点击事件
          navLinks.forEach(link => {
            link.addEventListener('click', function() {
              // 移除所有链接的高亮样式      
              navLinks.forEach(link => {    
                link.classList.remove('active');    
              });   
              // 给当前点击的链接添加高亮样式   
              this.classList.add('active');  
            });  
          });
          navLinks[3].classList.add('active');
        }
      </script>
</head>

<body>
    <div class="text-container">
        <div class="item-container">
            <div class="image-container"><img src="../images/1.jpg" alt=""></div>
            <div class="text-description">
                <h1>标题</h1>
                <p>这是一段文字描述。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec urna vel dolor
                    convallis tincidunt. Donec euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, vel aliquam
                    nisl nunc vel nisl.</p>
            </div>
        </div>
        <div class="item-container">
            <div class="image-container"><img src="../images/1.jpg" alt=""></div>
            <div class="text-description">
                <h1>标题</h1>
                <p>这是一段文字描述。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec urna vel dolor
                    convallis tincidunt. Donec euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, vel aliquam
                    nisl nunc vel nisl.</p>
            </div>
        </div>
    </div>
</body>

</html>